<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 淘乐乐</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
        }

        /* 导航栏样式 */
        .main-nav {
            background: #ff3c3c;
            padding: 15px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .nav-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            text-decoration: none;
        }

        /* 个人中心主体 */
        .user-center {
            display: flex;
            gap: 20px;
            margin: 20px auto;
            max-width: 1200px;
            padding: 0 15px;
        }

        /* 左侧菜单 */
        .sidebar {
            flex: 0 0 200px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .sidebar h3 {
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #ff3c3c;
        }

        .menu-list {
            list-style: none;
        }

        .menu-list li {
            margin-bottom: 10px;
        }

        .menu-list a {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #666;
            text-decoration: none;
            padding: 10px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .menu-list a:hover, .menu-list a.active {
            background: #fff1f1;
            color: #ff3c3c;
        }

        /* 右侧内容区 */
        .content {
            flex: 1;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .section-title {
            font-size: 20px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #ff3c3c;
        }

        /* 个人信息表单 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #666;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-group input:focus {
            border-color: #ff3c3c;
            outline: none;
        }

        .btn {
            padding: 10px 20px;
            background: #ff3c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .btn:hover {
            background: #ff5555;
        }

        /* 购物车样式 */
        .cart-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .cart-item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 15px;
        }

        .item-info {
            flex: 1;
        }

        .item-title {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .item-price {
            color: #ff3c3c;
            font-weight: bold;
        }

        .item-quantity {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .quantity-btn {
            padding: 5px 10px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
        }

        /* 收货地址样式 */
        .address-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .address-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            position: relative;
        }

        .address-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #ff3c3c;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .add-address-btn {
            background: #f5f5f5;
            border: 2px dashed #ddd;
            padding: 15px;
            border-radius: 8px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .add-address-btn:hover {
            border-color: #ff3c3c;
            color: #ff3c3c;
        }

        /* 收藏夹样式 */
        .favorites-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .favorite-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .favorite-card:hover {
            transform: translateY(-5px);
        }

        .favorite-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .favorite-info {
            padding: 15px;
        }

        .favorite-info h3 {
            margin-bottom: 10px;
            font-size: 16px;
        }

        .favorite-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
        }

        .add-to-cart-btn {
            background: #ff3c3c;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .add-to-cart-btn:hover {
            background: #ff5555;
        }

        .remove-favorite-btn {
            background: none;
            border: none;
            color: #ff3c3c;
            cursor: pointer;
            font-size: 18px;
        }

        .remove-favorite-btn:hover {
            transform: scale(1.1);
        }

        .cart-list {
            margin-top: 20px;
        }

        .cart-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: white;
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .cart-item img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            margin-right: 20px;
        }

        .item-quantity {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }

        .item-quantity button {
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 4px;
            cursor: pointer;
        }

        .cart-footer {
            display: flex;
            justify-content: flex-end;
            padding: 20px;
            background: white;
            border-radius: 8px;
            margin-top: 20px;
        }

        .checkout-btn {
            background: #ff3c3c;
            color: white;
            border: none;
            padding: 10px 30px;
            border-radius: 20px;
            margin-left: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .checkout-btn:hover {
            background: #ff5555;
            transform: translateY(-2px);
        }

        .empty-cart {
            text-align: center;
            padding: 50px;
            color: #999;
        }

        /* 账号设置样式 */
        .settings-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .settings-card h3 {
            color: #333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .settings-form {
            max-width: 400px;
        }

        .password-strength {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }

        .settings-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .settings-item:last-child {
            border-bottom: none;
        }

        .item-info h4 {
            margin-bottom: 5px;
            color: #333;
        }

        .item-info p {
            color: #666;
            font-size: 14px;
        }

        .btn-secondary {
            padding: 8px 15px;
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-secondary:hover {
            background: #eee;
        }

        .danger-zone {
            border: 1px solid #ffebee;
            background: #fff5f5;
        }

        .warning-text {
            color: #ff3c3c;
            font-size: 14px;
            margin: 10px 0;
        }

        .btn-danger {
            padding: 10px 20px;
            background: #ff3c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-danger:hover {
            background: #ff5555;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="main-nav">
        <div class="container">
            <div class="nav-content">
                <a href="淘乐乐商城.html" class="logo">淘乐乐</a>
                <div class="user-links">
                    <a href="购物车.html"><i class="fas fa-shopping-cart"></i> 购物车</a>
                    <a href="#"><i class="fas fa-user"></i> 个人中心</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 个人中心主体 -->
    <div class="user-center">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <h3>个人中心</h3>
            <ul class="menu-list">
                <li><a href="#" onclick="showSection('profile')" class="active"><i class="fas fa-user"></i> 个人信息</a></li>
                <li><a href="#" onclick="showSection('cart')"><i class="fas fa-shopping-cart"></i> 我的购物车</a></li>
                <li><a href="#" onclick="showSection('address')"><i class="fas fa-map-marker-alt"></i> 收货地址</a></li>
                <li><a href="#" onclick="showSection('favorites')"><i class="fas fa-heart"></i> 我的收藏</a></li>
                <li><a href="订单界面.html"><i class="fas fa-file-alt"></i> 我的订单</a></li>
                <li><a href="#" onclick="showSection('settings')"><i class="fas fa-cog"></i> 账号设置</a></li>
            </ul>
        </div>

        <!-- 右侧内容区 -->
        <div class="content">
            <!-- 个人信息 -->
            <div id="profile" class="section">
                <h2 class="section-title">个人信息</h2>
                <form>
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" value="匡纯果" readonly>
                    </div>
                    <div class="form-group">
                        <label>手机号码</label>
                        <input type="tel" value="138****5678">
                    </div>
                    <div class="form-group">
                        <label>电子邮箱</label>
                        <input type="email" value="example@email.com">
                    </div>
                    <button type="submit" class="btn">保存修改</button>
                </form>
            </div>

            <!-- 购物车 -->
            <div id="cart" class="section" style="display: none;">
                <h2 class="section-title">我的购物车</h2>
                <div class="cart-list">
                    <!-- 这里将通过JavaScript动态添加商品 -->
                </div>
                <div class="cart-footer">
                    <div class="cart-total">
                        合计：<span class="total-price">¥0</span>
                        <button class="checkout-btn" onclick="location.href='订单界面.html'">去结算</button>
                    </div>
                </div>
            </div>

            <!-- 收货地址 -->
            <div id="address" class="section" style="display: none;">
                <h2 class="section-title">收货地址</h2>
                <div class="address-list">
                    <div class="address-card">
                        <div class="address-tag">默认</div>
                        <h4>匡纯果 138****5678</h4>
                        <p>北京市海淀区XX街道XX小区</p>
                        <div class="address-actions">
                            <button onclick="editAddress(1)">编辑</button>
                            <button onclick="deleteAddress(1)">删除</button>
                            <button class="default-btn" disabled>默认地址</button>
                        </div>
                    </div>
                    <div class="address-card">
                        <h4>匡纯果 139****1234</h4>
                        <p>上海市浦东新区XX路XX号</p>
                        <div class="address-actions">
                            <button onclick="editAddress(2)">编辑</button>
                            <button onclick="deleteAddress(2)">删除</button>
                            <button onclick="setDefaultAddress(2)">设为默认</button>
                        </div>
                    </div>
                    <button class="add-address-btn" onclick="showAddressForm()">
                        <i class="fas fa-plus"></i> 添加新地址
                    </button>
                </div>
            </div>

            <!-- 我的收藏 -->
            <div id="favorites" class="section" style="display: none;">
                <h2 class="section-title">我的收藏</h2>
                <div class="favorites-grid">
                    <div class="favorite-card">
                        <img src="images/5.jpg" alt="iPhone 14 Pro Max">
                        <div class="favorite-info">
                            <h3>iPhone 14 Pro Max</h3>
                            <div class="price">¥8999</div>
                            <div class="favorite-actions">
                                <button class="add-to-cart-btn" onclick="addToCart({
                                    name: 'iPhone 14 Pro Max',
                                    price: 8999,
                                    image: 'images/5.jpg',
                                    specs: '深空黑色 256GB',
                                    quantity: 1
                                })">加入购物车</button>
                                <button class="remove-favorite-btn" onclick="removeFavorite(1)">
                                    <i class="fas fa-heart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- 更多收藏商品... -->
                </div>
            </div>

            <!-- 在右侧内容区添加账号设置部分 -->
            <div id="settings" class="section" style="display: none;">
                <h2 class="section-title">账号设置</h2>
                
                <!-- 修改密码 -->
                <div class="settings-card">
                    <h3><i class="fas fa-lock"></i> 修改密码</h3>
                    <form class="settings-form" onsubmit="return updatePassword(event)">
                        <div class="form-group">
                            <label>当前密码</label>
                            <input type="password" id="currentPassword" required>
                        </div>
                        <div class="form-group">
                            <label>新密码</label>
                            <input type="password" id="newPassword" required>
                            <div class="password-strength">密码强度：<span id="passwordStrength">弱</span></div>
                        </div>
                        <div class="form-group">
                            <label>确认新密码</label>
                            <input type="password" id="confirmPassword" required>
                        </div>
                        <button type="submit" class="btn">确认修改</button>
                    </form>
                </div>

                <!-- 安全设置 -->
                <div class="settings-card">
                    <h3><i class="fas fa-shield-alt"></i> 安全设置</h3>
                    <div class="settings-list">
                        <div class="settings-item">
                            <div class="item-info">
                                <h4>手机验证</h4>
                                <p>已绑定：138****5678</p>
                            </div>
                            <button class="btn-secondary" onclick="updatePhone()">修改</button>
                        </div>
                        <div class="settings-item">
                            <div class="item-info">
                                <h4>邮箱验证</h4>
                                <p>已绑定：exa****@email.com</p>
                            </div>
                            <button class="btn-secondary" onclick="updateEmail()">修改</button>
                        </div>
                        <div class="settings-item">
                            <div class="item-info">
                                <h4>实名认证</h4>
                                <p>已认证</p>
                            </div>
                            <button class="btn-secondary" onclick="viewIdentity()">查看</button>
                        </div>
                    </div>
                </div>

                <!-- 账号注销 -->
                <div class="settings-card danger-zone">
                    <h3><i class="fas fa-exclamation-triangle"></i> 账号注销</h3>
                    <p class="warning-text">注销账号后，所有数据将无法恢复，请谨慎操作</p>
                    <button class="btn-danger" onclick="deleteAccount()">申请注销账号</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加JavaScript代码 -->
    <script>
        // 显示不同的内容区域
        function showSection(sectionId) {
            // 隐藏所有section
            document.querySelectorAll('.section').forEach(section => {
                section.style.display = 'none';
            });
            // 显示选中的section
            document.getElementById(sectionId).style.display = 'block';
            
            // 如果是购物车部分，则渲染购物车内容
            if (sectionId === 'cart') {
                renderCartItems();
            }
            
            // 更新菜单激活状态
            document.querySelectorAll('.menu-list a').forEach(link => {
                link.classList.remove('active');
            });
            event.target.classList.add('active');
        }

        // 渲染购物车商品
        function renderCartItems() {
            const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
            const cartList = document.querySelector('.cart-list');
            let total = 0;

            if (cartItems.length === 0) {
                cartList.innerHTML = '<div class="empty-cart">购物车是空的</div>';
                document.querySelector('.total-price').textContent = '¥0';
                return;
            }

            cartList.innerHTML = cartItems.map((item, index) => {
                total += item.price * item.quantity;
                return `
                    <div class="cart-item">
                        <img src="${item.image}" alt="${item.name}">
                        <div class="item-info">
                            <h3 class="item-title">${item.name}</h3>
                            <p class="item-specs">${item.specs}</p>
                            <div class="item-price">¥${item.price}</div>
                            <div class="item-quantity">
                                <button onclick="updateQuantity(${index}, -1)">-</button>
                                <span>${item.quantity}</span>
                                <button onclick="updateQuantity(${index}, 1)">+</button>
                            </div>
                        </div>
                        <button class="remove-btn" onclick="removeItem(${index})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;
            }).join('');

            document.querySelector('.total-price').textContent = `¥${total}`;
        }

        // 更新商品数量
        function updateQuantity(index, change) {
            const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
            cartItems[index].quantity = Math.max(1, cartItems[index].quantity + change);
            localStorage.setItem('cartItems', JSON.stringify(cartItems));
            renderCartItems();
        }

        // 删除商品
        function removeItem(index) {
            if (confirm('确定要删除这个商品吗？')) {
                const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
                cartItems.splice(index, 1);
                localStorage.setItem('cartItems', JSON.stringify(cartItems));
                renderCartItems();
            }
        }

        // 页面加载时显示个人信息
        document.addEventListener('DOMContentLoaded', () => {
            showSection('profile');
        });

        // 地址管理功能
        function editAddress(id) {
            // 实现编辑地址的逻辑
            alert('编辑地址 ' + id);
        }

        function deleteAddress(id) {
            if (confirm('确定要删除这个地址吗？')) {
                // 实现删除地址的逻辑
                alert('删除地址 ' + id);
            }
        }

        function setDefaultAddress(id) {
            // 实现设置默认地址的逻辑
            alert('设置默认地址 ' + id);
        }

        function showAddressForm() {
            // 实现显示添加地址表单的逻辑
            alert('显示添加地址表单');
        }

        // 收藏夹功能
        function removeFavorite(id) {
            if (confirm('确定要取消收藏这个商品吗？')) {
                // 实现取消收藏的逻辑
                alert('取消收藏商品 ' + id);
            }
        }

        // 修改密码
        function updatePassword(event) {
            event.preventDefault();
            const currentPassword = document.getElementById('currentPassword').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;

            if (newPassword !== confirmPassword) {
                alert('两次输入的密码不一致');
                return false;
            }

            // 这里添加密码修改的逻辑
            alert('密码修改成功！');
            event.target.reset();
            return false;
        }

        // 检查密码强度
        document.getElementById('newPassword').addEventListener('input', function(e) {
            const password = e.target.value;
            const strengthSpan = document.getElementById('passwordStrength');
            let strength = '弱';
            
            if (password.length >= 8 && /[A-Z]/.test(password) && /[a-z]/.test(password) && /[0-9]/.test(password)) {
                strength = '强';
            } else if (password.length >= 6 && /[A-Za-z]/.test(password) && /[0-9]/.test(password)) {
                strength = '中';
            }
            
            strengthSpan.textContent = strength;
        });

        // 修改手机号
        function updatePhone() {
            // 实现修改手机号的逻辑
            alert('请输入新的手机号码');
        }

        // 修改邮箱
        function updateEmail() {
            // 实现修改邮箱的逻辑
            alert('请输入新的邮箱地址');
        }

        // 查看实名认证
        function viewIdentity() {
            // 实现查看实名认证的逻辑
            alert('查看实名认证信息');
        }

        // 注销账号
        function deleteAccount() {
            if (confirm('确定要注销账号吗？此操作不可恢复！')) {
                // 实现账号注销的逻辑
                alert('账号注销申请已提交');
            }
        }
    </script>
</body>
</html> 